<template>
    <div class="lever2">
        <div class="hd">
            <span class="name">四季款</span>
            <p class="desc">四季款</p>
        </div>
        <List :goodslist="list" />
    </div>
</template>

<script setup>
import List from '@/components/List.vue'
import axios from 'axios';
import { onMounted, ref } from 'vue';
components: {
    List
}
const list = ref([])
async function getGoods() {
    const { data } = await axios.get('http://localhost:3001/goods')
    console.log(data);
    list.value = data
}

onMounted(() => {
    getGoods()
})
</script>

<style lang="less" scoped>
.lever2 {

    .hd {
        text-align: center;
        line-height: 1;
        margin-bottom: 40px;

        .name {
            font-size: 24px;
            font-weight: 700;
            line-height: 44px;
        }

        .desc {
            font-size: 14px;
            color: #999;
            line-height: 1.5;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
</style>